<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'

import SiteNotice from '../components/SiteNotice.vue'
import weapondata from '../data/GunWeaponData.json'
import elems from '../data/LanguageWeaponElementData.json'
import jsonToMap from '../j2m'
import { getText } from '../store/txtstore'
import '../assets/elem.css'

const weaponData = jsonToMap(weapondata.data)

const types = ['', '手枪', '冲锋枪', '步枪', '突击步枪', '机枪', '霰弹枪', '刀']
const typeFilter = ref(Object.fromEntries(types.map((value, index) => [index, false])))

const ranks = new Map([
  [3, '旧式'],
  [4, '标准'],
  [5, '精英']
])
const rankFilter = ref({3: false, 4: false, 5: false})

const elemIds = Object.keys(elems)
const elemFilter = ref(Object.fromEntries(elemIds.map(value => [value, false])))

const arms = []
for (const k of weaponData.keys()) {
  const a = weaponData.get(k)
  if (a[12] != 10000) {
    arms.push(a)
  }
}

function filter(rank, elem, type) {
  const rankMatch = rankFilter.value[rank] || !(rankFilter.value[3] || rankFilter.value[4] || rankFilter.value[5])
  const elemMatch = elemFilter.value[elem] || Object.values(elemFilter.value).every(e => !e)
  const typeMatch = typeFilter.value[type] || Object.values(typeFilter.value).every(t => !t)
  return rankMatch && elemMatch && typeMatch
}

function selectAll() {
  for (let i = 8; --i;) {
    typeFilter.value[i] = false
  }
}
</script>

<template>
  <SiteNotice />
  <article>
    <form>
      <fieldset>
        <legend>稀有度</legend>
        <label v-for="[rid, rank] of ranks" :class="'rank-' + rid"><input type="checkbox" v-model="rankFilter[rid]">{{ rank }}</label>
      </fieldset>
      <fieldset>
        <legend>伤害类型</legend>
        <label v-for="elem of elemIds"><input type="checkbox" v-model="elemFilter[elem]">{{ elems[elem] }}</label>
      </fieldset>
      <fieldset>
        <legend>种类</legend>
        <button @click="selectAll">全选</button>&nbsp;
        <label v-for="(type, idx) of types.slice(1)"><input type="checkbox" v-model="typeFilter[idx + 1]">{{ type }}</label>
      </fieldset>
    </form>
    <table>
      <tr>
        <th>武器</th>
        <th>种类</th>
      </tr>
      <tr v-for="arm of arms" v-show="filter(arm[11], arm[36], arm[4])">
        <td :uid="arm[1]">
          <RouterLink :to="'/weapon/' + arm[1]" :class="'rank-' + arm[11]">{{ getText(arm[2][1]) }}</RouterLink>
        </td>
        <td :class="['weapon-elem', 'weapon-elem-'+arm[36]]">{{ types[arm[4]] }}</td>
      </tr>
    </table>
  </article>
</template>

<style scoped>
nav {
  position: absolute;
}

label {
  margin: 0 0.25em;
}

input {
  margin-right: 2px;
}

table {
  width: fit-content;
}
</style>